import type { NextPage } from 'next'
import Head from 'next/head'

import styles from '../styles/Login.module.scss'
import { Form, Input, Button, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import router from 'next/router'

import { AdminService } from '../services'

const Home: NextPage = () => {

  const onFinish = async (values: any) => {
    const { username, password } = values
    const res = await AdminService.login(username, password)
    if (res.stat === 'OK') {
      message.success('登录成功')
      router.push('/')
    } else {
      message.error(res.msg)
    }
  };

  return (
    <div className="page">
      <Head>
        <title>登录页</title>
      </Head>
      <div className={styles.wrap}>
        <div className={styles.login}>
          <Form
            className={styles.logWrap}
            initialValues={{ remember: true }}
            onFinish={onFinish}
          >
            <h1>登录系统</h1>

            <Form.Item
              name="username"
              rules={[{ required: true, message: 'Please input your Username!' }]}
            >
              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: 'Please input your Password!' }]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>

            <Form.Item>
              <Button block type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  )
}

export default Home
